<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
	<head>
		<title>LASO for Iphone, Android &nbsp; Smartphone Mobile Website Template | Home : w3layouts</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="The free LASO Iphone web template, Andriod web template, Smartphone web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="./js/jquery.min.js"></script>
		 <!---- start-smoth-scrolling---->
		<script type="text/javascript" src="./js/move-top.js"></script>
		<script type="text/javascript" src="./js/easing.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
		 <!---- start-smoth-scrolling---->
		 <!-- Custom Theme files -->
		<link href="./css/style.css" rel='stylesheet' type='text/css' />
   		 <!-- Custom Theme files -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
		</script>
		<!----webfonts--->
		<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
		<!---//webfonts--->
		<!----start-top-nav-script---->
		<script>
			$(function() {
				var pull 		= $('#pull');
					menu 		= $('nav ul');
					menuHeight	= menu.height();
				$(pull).on('click', function(e) {
					e.preventDefault();
					menu.slideToggle();
				});
				$(window).resize(function(){
	        		var w = $(window).width();
	        		if(w > 320 && menu.is(':hidden')) {
	        			menu.removeAttr('style');
	        		}
	    		});
			});
		</script>
		<!----//End-top-nav-script---->
	</head>
	<body style="overflow:-Scroll;overflow-x:hidden">
		<!----- start-header---->
			<div id="home" class="header">
					<div class="top-header bounceInDown" data-wow-delay="0.4s">
						<div class="container">
						<div class="logo">
							<img src="images/logo.jpg" class="kylogo"/>
						</div>
						
						<div class="clearfix"> </div>
					</div>
				</div>
			</div>
		<!----- //End-header---->
		<!----start-slider-script---->
			<script src="./js/responsiveslides.min.js"></script>
			 <script>
			    // You can also use "$(window).load(function() {"
			    $(function () {
			      // Slideshow 4
			      $("#slider4").responsiveSlides({
			        auto: true,
			        pager: true,
			        nav: true,
			        speed: 500,
			        namespace: "callbacks",
			        before: function () {
			          $('.events').append("<li>before event fired.</li>");
			        },
			        after: function () {
			          $('.events').append("<li>after event fired.</li>");
			        }
			      });
			
			    });
			  </script>
			<!----//End-slider-script---->
			<!-- Slideshow 4 -->
			    <div  id="top" class="callbacks_container">
			      <ul class="rslides" id="slider4">
			        <li>
			          <img src="./images/slide1.jpg" alt="">
			         
			        </li>
			        <li>
			          <img src="./images/slide2.jpg" alt="">
			       
			          	
			        </li>
			        <li>
			          <img src="./images/slide1.jpg" alt="">
			        
			          
			        </li>
			      </ul>
			    </div>
			    <div class="clearfix"> </div>
			<!----- //End-slider---->
			<!---- top-grids ---->
			<div class="grade">
					<ul>
						<a href="http://www.taobao.com/"><li class="PrimarySchool"><img src="images/xiaoxuep.jpg"/></li></a>
						<a href="http://www.taobao.com/"><li class="JuniorMiddleSchool"><img src="images/chuzhong.jpg"/></li></a>
						<a href="http://www.baidu.com/"><li class="highSchool"><img src="images/gaozhongp.jpg"/></li></a>
						
					</ul>
					
				</div>
			<div class="banner-one">
				<img src="images/zzz1.jpg" class="banner-one-img"/>
			</div>
			
			<!--新闻-->
			<div class="recruit">
				<div class="recruit-content">
					<img src="images/recruit.jpg" class="recruit-img"/>
					<div class="avigation-school">
						<ui class="avigation">
							<li>幼升小</li>
							<li>小升初</li>
							<li>初升高</li>
							<li style="border: 0px;">高考</li>
						</ui>
					</div>
					
					<div class="box">
						
	        <div class="bcon">
		
	     	<div class="list_lh">
			  <ul>
				<li>11111111111111111111111111111111111</li>
				<li>211111111111111111111111111111111111</li>
				<li>311111111111111111111111111111111111</li>
				<li>411111111111111111111111111111111111</li>
				<li>511111111111111111111111111111111111</li>
				<li>611111111111111111111111111111111111</li>
				<li>711111111111111111111111111111111111</li>
				<li>811111111111111111111111111111111111</li>
				<li>911111111111111111111111111111111111</li>
				<li>q11111111111111111111111111111111111</li>
				<li>w11111111111111111111111111111111111</li>
				<li>e11111111111111111111111111111111111</li><li>1</li>
				<li>r</li>
				<li>t</li>
				<li>a</li>
				<li>z</li>
				<li>z</li>
		
			  </ul>
		    </div>
	        </div>
	
	        </div>
	        <hr> <span class="more"><更多></span>
				</div>
				
			</div>
			
			
			<!--名师-->
			<div class="teacher">
				<div class="teacher-content">
					<img src="images/recruit.jpg" class="recruit-img"/>
				<div class="box">
						
	       <div class="htmleaf-container">


	<div class="carousel" data-gap="20" data-bfc>
		<figure>
				
			<img src="img/teacher.jpg" alt="">
			<img src="img/3.jpg" alt="">
			<img src="img/4.jpg" alt="">
			<img src="img/5.jpg" alt="">
			<img src="img/6.jpg" alt="">
			<img src="img/7.jpg" alt="">
			<img src="img/8.jpg" alt="">
		</figure>
		<nav>
			<button class="nav prev">←</button>
			<button class="nav next">→</button>
		</nav>
	</div>
	
</div>

	
	        </div>
	       <!-- <hr> <span class="more"><更多></span>-->
				</div>
				
			</div>
			<!---- sub-footer --->
			</div>
	</body>
	<script type="text/javascript" src="js/scroll.js"></script>
	<script type="text/javascript">
$(document).ready(function(){
	$('.list_lh li:even').addClass('lieven');
})
$(function(){
	$("div.list_lh").myScroll({
		speed:80, //��ֵԽ���ٶ�Խ��
		rowHeight:270 //li�ĸ߶�
	});
});
</script>
<script type="text/javascript">
	'use strict';

	window.addEventListener('load', function () {
		var carousels = document.querySelectorAll('.carousel');

		for (var i = 0; i < carousels.length; i++) {
			carousel(carousels[i]);
		}
	});

	function carousel(root) {
		var figure = root.querySelector('figure'),
			nav = root.querySelector('nav'),
			images = figure.children,
			n = images.length,
			gap = root.dataset.gap || 0,
			bfc = 'bfc' in root.dataset,
			theta = 2 * Math.PI / n,
			currImage = 0;

		setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
		window.addEventListener('resize', function () {
			setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
		});

		setupNavigation();

		function setupCarousel(n, s) {
			var apothem = s / (2 * Math.tan(Math.PI / n));

			figure.style.transformOrigin = '50% 50% ' + -apothem + 'px';

			for (var i = 0; i < n; i++) {
				images[i].style.padding = gap + 'px';
			}for (i = 1; i < n; i++) {
				images[i].style.transformOrigin = '50% 50% ' + -apothem + 'px';
				images[i].style.transform = 'rotateY(' + i * theta + 'rad)';
			}
			if (bfc) for (i = 0; i < n; i++) {
				images[i].style.backfaceVisibility = 'hidden';
			}rotateCarousel(currImage);
		}

		function setupNavigation() {
			nav.addEventListener('click', onClick, true);

			function onClick(e) {
				e.stopPropagation();

				var t = e.target;
				if (t.tagName.toUpperCase() != 'BUTTON') return;

				if (t.classList.contains('next')) {
					currImage++;
				} else {
					currImage--;
				}

				rotateCarousel(currImage);
			}
		}

		function rotateCarousel(imageIndex) {
			figure.style.transform = 'rotateY(' + imageIndex * -theta + 'rad)';
		}
	}
</script>
</html>

